<template>
	<div class="big">
		Big
		<!-- 动态切换页面 -->
		<!-- <Small1/>
		<Small2/> -->
		<hr>

		<keep-alive>
			<!-- 标准写法 -->
			<component :is="currentView"></component>
		</keep-alive>

		<hr>
 		{{ flag }}		
		<!-- {{currentView}} -->
		<hr>
		<button @click="changeView">切换视图</button>
	</div>
</template>
<script>
	import Small1 from "./small1"
	import Small2 from "./small2"

	export default {
		name:"big",
		data(){
			return{
				currentView: "small1",
				flag: true
			}
		},
		methods: {
			changeView: function (event) {
				if (this.flag) {
					this.currentView = "small2";
					this.flag = false;
				}else{
					this.currentView = "small1";
					this.flag = true;
				}
			}
		},
		components: {
			Small1,
			Small2
		},
		computed: {
			
		}
	}
</script>
<style scoped>
	
</style>